<template>
  <div class="clothes-image-grid">
    <div
      v-for="item in clothes"
      :key="item._id"
      class="clothes-image-item"
      @click="goToClothesDetail(item._id)"
    >
      <div class="image-wrapper">
        <img
          :src="
            item.imageUrls && item.imageUrls.length > 0 ? item.imageUrls[0] : ''
          "
          :alt="item.name || '衣物图片'"
          class="clothes-image"
          :class="customClass"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
const router = useRouter();
// 定义组件属性
const props = defineProps({
  // 衣物列表
  clothes: {
    type: Array,
    default: () => [],
  },
  // 图片URL地址
  imageUrl: {
    type: String,
    default: "https://via.placeholder.com/300x300?text=No+Image",
  },
  // 图片描述文本
  altText: {
    type: String,
    default: "",
  },
  // 穿着次数
  wearCount: {
    type: Number,
    default: 0,
  },
  // 自定义CSS类名
  customClass: {
    type: String,
    default: "",
  },
  // 是否可点击
  clickable: {
    type: Boolean,
    default: false,
  },
  // 项目ID，用于点击事件传递
  itemId: {
    type: String,
    default: "",
  },
});

// 跳转到衣物详情
const goToClothesDetail = (clothesId) => {
  router.push(`/clothes/${clothesId}`);
};

// 定义组件事件
// const emit = defineEmits(['click']);

// // 处理点击事件
// const handleClick = () => {
//   if (props.clickable) {
//     emit('click', props.itemId);
//   }
// };
</script>

<style scoped>
/* 衣物图片网格样式 - 最少一排3个，屏幕宽度足够时显示更多 */
.clothes-image-grid {
  flex: 1;
  overflow-y: auto;
  /* 隐藏滚动条 */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* 兼容h5 */
  overflow: -moz-scrollbars-none;
  display: grid;
  /* 使用auto-fill和minmax确保最少3列，同时允许屏幕宽度足够时显示更多 */
  grid-template-columns: repeat(auto-fill, minmax(min(30%, 100px), 1fr));
  grid-auto-rows: 1fr;
  gap: 15px;
  margin-top: 15px;
  width: 100%;
  box-sizing: border-box;
  align-items: start;
}
.clothes-image-grid::-webkit-scrollbar {
  display: none;
}
/* 确保在不同屏幕尺寸下保持最少一排3个，并根据屏幕宽度调整图片大小和间距 */
@media screen and (max-width: 768px) {
  .clothes-image-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(32%, 100px), 1fr));
    gap: 10px;
    flex: 1;
    overflow-y: auto;
    /* 隐藏滚动条 */
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* 兼容h5 */
    overflow: -moz-scrollbars-none;
    /* padding: 0 5px; */
  }
}

@media screen and (max-width: 480px) {
  .clothes-image-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(32%, 100px), 1fr));
    gap: 8px;
    flex: 1;
    overflow-y: auto;
    /* 隐藏滚动条 */
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* 兼容h5 */
    overflow: -moz-scrollbars-none;
    /* padding: 0 4px; */
  }
}

@media screen and (max-width: 360px) {
  .clothes-image-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(32%, 100px), 1fr));
    gap: 6px;
    flex: 1;
    overflow-y: auto;
    /* 隐藏滚动条 */
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* 兼容h5 */
    overflow: -moz-scrollbars-none;
    /* padding: 0 3px; */
  }
}

.clothes-image-item {
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  /* 移动端触摸反馈 */
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

.clothes-image-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* 触摸激活效果（针对移动端） */
.clothes-image-item:active {
  transform: scale(0.98);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.clothes-image-item:hover .clothes-image {
  transform: scale(1.05);
}

/* 触摸时图片缩放（针对移动端） */
.clothes-image-item:active .clothes-image {
  transform: scale(0.95);
}
.image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clothes-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.2s ease;
}

.image-wrapper:hover .clothes-image {
  transform: scale(1.05);
}

.wear-count-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background-color: #ff4d4f;
  color: white;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>
